<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18.5.4-避免交叉请求引起的状态污染</title>
</head>
<body>
    <div id="app"></div>
</body>
    <script>
        /**
         * 编写同构代码时，额外需要注意的是，避免交叉请求引起的状态污染
        */

        /**
         * 在服务端渲染时，我们会为每一个请求创建一个全新的应用实例
         * 
         * 每次调用 render 函数进行服务端渲染时，
         *  都会为当前请求调用createSSRApp 函数来创建一个新的应用实例。
         *  这是为了避免不同请求共用同一个应用实例所导致的状态污染。
         * */ 
        import { createSSRApp } from 'vue'
        import { renderToString } from '@vue/server-renderer'
        import App from 'App.vue'

        // 每个请求到来，都会执行一次 render 函数
        async function render(url, manifest) {
            // 为当前请求创建应用实例
            const app = createSSRApp(App)

            const ctx = {}
            const html = await renderToString(app, ctx)

            return html
        }

        /**
         * 状态污染的情况还可能发生在单个组件的代码中 
         * - 这段组件的代码在浏览器中运行，则不会产生任何问题，
         *    因为浏览器与用户是一对一的关系，每一个浏览器都是独立的
         * - 如果这段代码在服务器中运行，情况会有所不同，
         *    因为服务器与用户是一对多的关系
         * 
         * count 会递增
         * */ 

        // 模块级别的全局变量
        let count = 0
        export default {
            create() {
                count++
            }
        }
    </script>
</html>